<template>
	<view class="container">
		<view class="inner" :style="activityJson?.wrapper?.style">
			<!-- <view class="activity-name">
				邮惠云团
			</view> -->
			<!-- <view class="activity-times">
				{{ vdata.numEveryoneText }}
			</view> -->
			<!-- <view class="activity-time">
				限时活动：{{ dayjs(vdata.activityDetail.startTime).format('M[月]D[日]') }} ~ {{ dayjs(vdata.activityDetail.endTime).format('M[月]D[日]') }}
			</view> -->
			<!-- <view class="activity-coupon">
				<text>￥</text>
				<text>{{ vdata.couponPriceTotal }}</text>
			</view> -->
			<!-- <view class="sq-state" @click="exitProgram">{{ vdata.btnConfig.text }}</view> -->
			<uni-popup ref="popup" type="center" border-radius="10px">
				<view class="content">
					<!-- <view class="delete">
						<image src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/00ed3729-c814-474f-b5f7-4afdcc044ee6.png" mode="aspectFill"></image>
					</view> -->
					<view class="titleTips">
						温馨提示
					</view>
					<view class="contentText">
						{{tips}}
					</view>
					<view class="btn">
						<view class="btnText" @click="goToIndex">
							立即前往
						</view>
					</view>
				</view>
			</uni-popup>
			<uni-popup ref="popup1" type="center" border-radius="10px">

				<view class="content1">
					<!-- <view class="delete">
						<image src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/00ed3729-c814-474f-b5f7-4afdcc044ee6.png" mode="aspectFill"></image>
					</view> -->
					<view class="innerCoupon">

					</view>
					<view class="btn">
						<view class="website" @click="gotoWebsite">
							导航至网点激活
						</view>
						<view class="lookAtCoupon" @click="lookAtCoupon">
							查看卡券
						</view>
					</view>

				</view>
			</uni-popup>
		</view>
	</view>
	<!-- https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/e1d1e817-ddb8-4a26-8a27-571469c2c9f1.png -->
	<!-- 授权登录弹窗 -->
	<gzLoginPopup ref="gzLoginPopupRef" v-model:isLogin="vdata.isLogin" @isLoginCallback="isLoginCallback"></gzLoginPopup>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import storageManage from '@/util/storageManage.js'
	import {
		$getAwardList,
		$couponDetail,
		$activityTakePartIn
	} from '@/http/apiManager.js';
	import dayjs from 'dayjs'
	import appConfig from '@/config/appConfig.js'

	const {
		$infoBox
	} = getCurrentInstance().appContext.config.globalProperties


	const gzLoginPopupRef = ref()
	const popup = ref()
	const popup1 = ref()
	const vdata = reactive({
		isLogin: false,	// 用户是否登录
		activityId: '',
		activityDetail: {},
		activityChannelId: null,
		awardId: ''
	})
	// 弹窗提示文本
	const tips = ref('您已是郑州邮政会员，请前往“郑邮享”小程序，享受更多会员权益。')
	
	const activityJson = ref({
		"wrapper":{
			"style":{
				"height":"1448rpx",
				"background":"url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/3e435377-7c17-4d8b-91f3-c721c1f5ce1b.png') no-repeat left top / 100% 100%"
			}
		}
	})

	onLoad(async ({
		activityId,
		activityDetail,
		activityChannelId
	}) => {
		vdata.isLogin = storageManage.isLogin()
		vdata.activityId = activityId
		vdata.activityChannelId = activityChannelId
		vdata.activityDetail = JSON.parse(decodeURIComponent(activityDetail))
		// 活动动态参数
		activityJson.value = JSON.parse(vdata.activityDetail.activityJson || '{}')
		// 判断用户是否登录过
		if (!vdata.isLogin) {
			uni.showModal({
				title: '提示',
				content: '请先进行登录注册，再进行参与！',
				success({
					cancel
				}) {
					if (cancel) {
						$infoBox.toast('登录失败，无法正常参与活动！')
					} else {
						gzLoginPopupRef.value.open() // 打开授权弹框
					}
				}
			})
		} else {
			activityTakePartIn()
		}
	})

	// 前往小程序首页
	const goToIndex = () => {
		uni.switchTab({
			url: '/pages/index/index'
		})
	}
	// 导航到网点激活
	const gotoWebsite = () => {
		toUrl(`/pageUser/myCoupon/mchList?couponId=${vdata.awardId}&activate=${true}`)
	}
	// 查看卡券
	const lookAtCoupon = () => {
		uni.navigateTo({
			url: `/pageUser/myCoupon/index?tabCurrent=0&couponState=3`
		})
	}

	/**
	 * 登录回调
	 */
	function isLoginCallback(e) {
		if (!vdata.isLogin) {
			$infoBox.toast('登录失败，无法正常参与活动！')
		} else {
			activityTakePartIn()
		}
	}
	
	/**
	 * 参与活动
	 */
	function activityTakePartIn(){
		$activityTakePartIn({
			activityId: vdata.activityId,
			activityTemplateNo: vdata.activityDetail.activityTemplateNo,
			activityChannelId: vdata.activityChannelId,
		}).then(res => {
			if (res.code == 0) {
				// 弹出活动页面
				vdata.awardId = res.bizData.awardId
				popup1.value.open()
			} else {
				// 弹提示窗口
				tips.value = res.msg
				popup.value.open()
			}
		}).catch((err) => {
			tips.value = err
			popup.value.open()
		})
	}

	/**
	 * 路由跳转
	 */
	function toUrl(url) {
		uni.navigateTo({
			url
		})
	}
</script>

<style lang="less" scoped>
	.container {
		width: 100%;
		min-height: 100vh;
		background-color: #e72118;
		overflow: hidden;

		.inner {
			position: relative;
			width: 100%;
			overflow: hidden;
			height: 1448rpx;
			box-sizing: border-box;

			background: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/3e435377-7c17-4d8b-91f3-c721c1f5ce1b.png') no-repeat left top / 100% 100%;
			padding-top: 730rpx;

			.content1 {
				position: relative;
				width: 750rpx;
				height: 650rpx;
				border-radius: 20rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				// justify-content: center;

				.innerCoupon {
					width: 684rpx;
					height: 510rpx;
					background: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/6e144e5a-f994-4f1d-9064-7b0753297f03.png') no-repeat left top / 100% 100%;
					background-size: cover;
				}

				.btn {
					position: absolute;
					bottom: 0;
					width: 100%;
					height: 120rpx;
					display: flex;
					justify-content: space-between;
					padding: 0 48rpx;
					box-sizing: border-box;
					align-items: center;

					.website {
						width: 295rpx;
						height: 75rpx;
						background: linear-gradient(180deg, #FDF0BD, #FBC96D);
						border-radius: 38rpx;
						border: 2px solid #FFFFFF;
						color: #F4212B;
						opacity: 0.99;
						text-align: center;
						line-height: 75rpx;
						font-size: 36rpx;
						font-weight: 600;
					}

					.lookAtCoupon {
						text-align: center;
						line-height: 75rpx;
						width: 295rpx;
						height: 75rpx;
						background: linear-gradient(180deg, #FDF0BD, #FBC96D);
						border-radius: 38rpx;
						border: 2px solid #FFFFFF;
						color: #F4212B;
						opacity: 0.99;
						font-size: 36rpx;
						font-weight: 600;
					}

				}
			}

			.content {
				position: relative;
				width: 633rpx;
				height: 584rpx;
				border-radius: 20rpx;
				background: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/cbcab6bd-b908-4263-8ecb-2644e747bf58.png') no-repeat left top / 100% 100%;
				background-size: cover;

				.delete {
					width: 51rpx;
					height: 51rpx;
					position: absolute;
					top: 24rpx;
					right: 34rpx;
				}

				.titleTips {
					width: 100%;
					position: absolute;
					top: 101rpx;
					display: flex;
					justify-content: center;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 58rpx;
					color: #000000;
				}

				.contentText {
					position: absolute;
					top: 227rpx;
					padding: 0 53rpx;
					box-sizing: border-box;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 38rpx;
					color: #000000;
					text-indent: 2em;
				}

				.btn {
					position: absolute;
					bottom: 43rpx;
					width: 100%;
					display: flex;
					justify-content: center;

					.btnText {
						width: 322rpx;
						height: 85rpx;
						background: linear-gradient(90deg, rgba(110, 167, 239, 0.99), rgba(110, 167, 239, 0.99));
						border-radius: 43rpx;
						text-align: center;
						line-height: 85rpx;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 46rpx;
						color: #FFFFFF;
					}

				}
			}

			.activity-name {
				padding-top: 50rpx;
				transform: rotateZ(-4deg);
				text-align: center;
				font-family: YouSheBiaoTiHei;
				font-size: 150rpx;
				color: rgb(255, 248, 245);
				text-shadow: 4px 4px #fa6c3d, 4px 8px rgba(0, 0, 0, 0.5);
			}

			.activity-times {
				font-size: 36rpx;
				text-align: center;
				font-weight: bold;
				min-height: 50rpx;
			}

			.activity-time {
				text-align: center;
				font-size: 28rpx;
				margin-top: 20rpx;
			}

			.activity-coupon {
				width: 100%;
				text-align: center;
				transform: rotateZ(3deg);

				text {
					font-family: YouSheBiaoTiHei;
					color: rgba(255, 40, 30, 0.7);
					text-shadow: 1px 1px 4px #fff, 0 0 0 #000;

					&:nth-child(1) {
						font-size: 70rpx;
						letter-spacing: -15px;
					}

					&:nth-child(2) {
						font-size: 100rpx;
					}
				}
			}

			.sq-state {
				margin: 450rpx auto 0;
				background: linear-gradient(to bottom, #e72118, #ed322b, #f0514b, #ed322b, #e72118);
				box-shadow: inset 4rpx 4rpx 8rpx #f9ab7f, inset -4rpx -6rpx 8rpx #f9ab7f;
				border-radius: 55rpx 55rpx 55rpx 55rpx;
				font-size: 40rpx;
				color: #FFFFFF;
				text-align: center;
				padding: 24rpx 0;
				width: calc(100% - 56rpx);
				text-shadow: 4rpx 8rpx 8rpx rgba(0, 0, 0, 0.9);
			}
		}
	}
</style>